<template>
  <div class="user">
    <!-- 表单 -->
    <el-card class="box-card mt-15">
      <div class="home-form">
        <el-form ref="ruleForm" label-width="60px" @submit.native.prevent>
          <el-row :gutter="10">
            <el-col :span="5">
              <el-form-item label="关键字" prop="keyword">
                <el-input placeholder="请输入用户账号" size="mini" v-model.trim="keyword" clearable maxlength="24"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label-width="70px" label="会员等级" prop="status">
                <el-select size="mini" style="width:90%" v-model="vipLevel" placeholder="请选择">
                  <el-option v-for="item in vipList" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleSearch" class="search-btn">搜索</el-button>
              <el-button type="danger" size="mini" @click="handleReset" class="search-btn">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>
    <el-card class="box-card">
      <!-- 头部 -->
      <div slot="header" class="clearfix fix-lh">
        <span>用户管理</span>
        <!-- <div class="btn-list">
          <el-button @click="handleAdd" v-hasPermission="permission.add">新增</el-button>
        </div> -->
      </div>
      <div class="home-body">
        <cvue-table :option="tableOption" :data="tableData" ref="tbl1" :isShowAdd="false" :page="page" :tablePage="tablePage" :pageSize="page.pageSize" :loading="tableLoading" @current-change="handleCurrentChange" @size-change="handleSizeChange" :isShowPage="pageShow">
          <template slot-scope="scope" slot="phone">
            <span class="activeStatus" @click="showKidMsg(scope.row)">{{scope.row.phone}}</span>
          </template>

          <template slot-scope="scope" slot="_vipState">
            <span>{{scope.row._vipState | vipStateFilter}}</span>
          </template>
          <template slot-scope="scope" slot="vipState">
            <span>{{scope.row._vipState | stateFilter}}</span>
          </template>
          <template slot-scope="scope" slot="expiredTime">
            <span>{{scope.row.expiredTime ? scope.row.expiredTime : '-'}}</span>
          </template>
          <template slot-scope="scope" slot="number">
            <span @click="handleOpenList(scope.row)">{{scope.row.number}}</span>
          </template>
          <!-- 操作按钮 -->
          <!-- <el-table-column fixed="right" slot="actionMenu" label="操作" align="center"
            header-align="center"  width="100">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleReset(scope.row)" v-hasPermission="permission.edit">密码重置</el-button>
            </template>
          </el-table-column> -->
        </cvue-table>
      </div>
    </el-card>
    <!-- 新增弹窗 -->
    <index-add @closeDialog="closeDialog('add')" @confirmDialog="confirmDialog('add')" @handleClose="closeDialog('add')" :dialogVisible="dialogVisibleAdd">
    </index-add>
    <!-- 孩子信息弹窗 -->
    <kid-msg @closeDialog="closeDialog('kid')" @confirmDialog="confirmDialog('kid')" @handleClose="closeDialog('kid')" :dialogVisible="dialogVisibleKid"  :info="netInfo">
    </kid-msg>
  </div>
</template>
<script>
import cvueTable from '@/components/cvue-table'
import cvueDialog from '@/components/cvue-dialog'
import indexAdd from './indexAdd'
import kidMsg from './kidMsg'
import { baseUrl } from '@/config/config.js'
import { touchRefresh } from '@/mixins/mixinKeep'

export default {
  name: 'user',
  mixins: [touchRefresh],
  components: {
    cvueTable,
    cvueDialog,
    indexAdd,
    kidMsg,
  },
  data () {
    return {
      vipLevel: '',
      vipList: [
        {label: '全部',value: ''},
        {label: 'VIP',value: '1'},
        {label: '普通用户',value: '2'}
      ],
      netInfo: {},
      dialogVisibleKid: false,
      userId: '',
      keyword: '',
      tableLoading: false,
      dialogVisibleAdd: false,
      tablePage: 1,
      pageShow: true,
      page: {
        total: 1, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10, // 每页显示多少条
        pageSizes: [10, 50, 100]
      },
      tableOption: {
        stripe: true,
        width: '100%',
        border: true,
        index: false,
        cloumn: [
          { prop: 'index', label: '序号', align: 'center', width: 80 },
          { prop: 'phone', label: '用户账号', align: 'center',slotStatus: true },
          // { prop: 'nickName', label: '昵称', align: 'center' },
          { prop: 'createTime', label: '注册时间', align: 'center' },
          { prop: '_vipState', label: '会员等级', align: 'center',  slotStatus: true },
          { prop: 'vipState', label: '状态', align: 'center',  slotStatus: true },
          { prop: 'expiredTime', label: '会员到期时间', align: 'center', slotStatus: true},
          { prop: 'number', label: '绑定设备数', align: 'center', minWidth: 50, slotStatus: true }
        ]
      },
      tableData: [
      ]
    }
  },
  filters: {
    vipStateFilter(val) {
      if (!val) return '-'
      console.log(val)
      const map = {0: '普通用户',1: 'VIP' ,2: '普通用户',3:'VIP'}
     return map[val]
    },
    stateFilter(val) {
      if (!val) return '-'
      const map = {0: '未订购',1: '生效中' ,2: '已到期',3: '未订购'}
     return map[val]
    }
  },
  mounted () {

  },
  methods: {
     // 查看孩子信息
    showKidMsg (row) {
      // this.netInfo = netInfo
        let netInfo = {
          phone: row.phone,
          nickname: row.nickName,
          sex: row.sex,
          region: row.region,
          birthday: row.birthday
        }
        this.netInfo = netInfo
        console.log('netInfo',netInfo)
        this.dialogVisibleKid = true
    },
    // 退订
    handleCancel (row) {
      console.log(row);
      // let text = '是否确定要将' + row.controlledId + '从' + row.userPhone + '上进行解绑？'
      this.$confirm('是否确定要将<span style="color: #409eff;">' + row.controlledId + '</span>从<span style="color: #409eff;">' + row.userPhone + '</span>上进行解绑？', '解绑', {
        dangerouslyUseHTMLString: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            var params = {
              controlledId: row.controlledId,
              userId: row.userId
            }
            // 进行退订操作
            this.$store.dispatch('commonUser/Unbundling', params).then(res => {
              // console.log(res)
              if (res.code == 200) {
                this.$message({
                  type: 'success',
                  message: res.msg
                })
                setTimeout(() => {
                  instance.confirmButtonLoading = false
                }, 300)
                // instance.confirmButtonLoading = false
                this.handleList(this.keyword, this.status, this.bind)
                done()
              } else {
                this.$message({
                  type: 'error',
                  message: res.msg
                })
                instance.confirmButtonLoading = false
                done()
              }
            })
          } else {
            instance.confirmButtonLoading = false
            done()
          }
        }
      }).catch(() => { })
    },
    // 当前策略
    getCurrentStrategy (row) {
      this.goUrl('current-strategy', {
        userId: row.userId,
        controlledId: row.controlledId
      })
    },
    // 改变pagesize
    handleSizeChange (val) {
      this.tablePage = 1
      this.page.pageSize = val
      this.handleList(this.keyword)
    },
    // 改变页码
    handleCurrentChange (val) {
      this.tablePage = val
      this.handleList(this.keyword)
    },
    // 用户搜索
    handleSearch () {
      this.tablePage = 1
      this.handleList(this.keyword)
    },
    // 重置条件并搜索
    handleReset () {
      this.keyword = ''
      this.vipLevel = ''
      this.tablePage = 1
      this.handleList(this.keyword)
    },
    // 列表接口
    handleList (keyword) {
      console.log(this.$route)
      this.tableLoading = true
      keyword = keyword.replace(/_/g, '\\\_').replace(/%/g, '\\\%')
      var params = {
        pageIndex: this.tablePage,
        pageSize: this.page.pageSize,
        keyword: keyword,
        vipLevel: this.vipLevel
      }
      console.log('这里', keyword)
      // return
      this.$store.dispatch('commonUser/GetUserInfo', params).then(res => {
        // console.log(res)
        if (res.code == 200) {
          var data = res.data
          this.tableData = data.list
          if (this.tableData == '') {
            this.pageShow = false
          } else {
            this.pageShow = true
          }
          this.page.total = data.total
          this.page.currentPage = this.tablePage
        } else {
          this.$message({
            message: res.msg,
            duration: 2000,
            type: 'error'
          })
        }
        this.tableLoading = false
      }).catch(err => {
        console.log(err)
        this.tableLoading = false
      })
    },
    // 单元格单击
    handleOpenList (row) {
      console.log(row)
      this.goUrl('open-list', { userId: row.userId, phone: row.phone, vipstate: row._vipState })
    },
    // 关闭弹窗
    closeDialog (params) {
      if (params == 'add') {
        this.dialogVisibleAdd = false
      }
      if (params == 'kid') {
        this.dialogVisibleKid = false
      }
    },
    // 确认
    confirmDialog (params) {
      if (params == 'add') {
        this.dialogVisibleAdd = false
        this.keyword = ''
        this.tablePage = 1
        this.handleList(this.keyword)
      }
      if (params == 'kid') {

      }
    },
    // 新增
    handleAdd () {
      this.dialogVisibleAdd = true
    }
  },
  activated () {
    this.handleList(this.keyword) // 获取列表详情
    console.log('activated')
  },
  deactivated () {
    console.log('deactivated')
  }
}
</script>
<style lang="scss">
.user {
  padding: 0px !important;
  height: auto !important;
  .home-body {
    margin-top: -15px;
  }
  .btn-list {
    float: right;
  }
  .el-card__header {
    border-bottom: none;
  }
  .fix-lh {
    line-height: 32px;
  }
  .text-right {
    text-align: right;
  }
  .el-card__header,
  .el-card__body {
    padding: 15px;
  }
  .el-input.is-disabled .el-input__inner {
    color: #606266;
  }
  .el-table__body {
    tr td:nth-child(7) span {
      color: #409eff;
      cursor: pointer;
    }
  }
  .table-body {
    margin-top: 20px;
  }
  .activeStatus {
    color: #409eff;
    cursor: pointer;
  }
}
</style>
